<?
layout("/inc/layout.html",{title:sysTitle}){
?>

<div id="page-wrapper">
      <!--BEGIN TITLE & BREADCRUMB PAGE-->
      <div id="title-breadcrumb-option-demo" class="page-title-breadcrumb">
          <div class="page-header pull-left">
              <div class="page-title">权限管理</div>
          </div>
          <ol class="breadcrumb page-breadcrumb pull-left">
              <li><i class="fa fa-home"></i>&nbsp;<a href="main.html">首页</a>&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
              <li>系统管理&nbsp;&nbsp;<i class="fa fa-angle-right"></i>&nbsp;&nbsp;</li>
              <li class="active">权限管理</li>
          </ol>
           
          <div class="clearfix"></div>
      </div>
      <!--END TITLE & BREADCRUMB PAGE-->
      <!--BEGIN CONTENT-->
      <div class="page-content">
        <!-- 知识分类s -->
       
	    
        <!-- 知识分类e -->
        <div class="row">
	        <div class="col-lg-5">
	            <div class="panel" style="height: 580px; overflow: auto;">
	                <div class="panel-heading">角色列表</div>
	                 <div>
                        <div class="panel-body">
                            <table class="table table-hover-color">
                                <tbody id="roles"></tbody>
                            </table>
                        </div>
                    </div>
	            </div>
	        </div>
	        
	        <div class="col-lg-7">
	        	<div class="panel" style="height: 580px;overflow: auto;">
	                <div class="panel-heading">菜单列表 
	                <button  style="float: right;"type="button" onclick="editSaveQuanXian()" class="btn btn-green btn-square" id="savejiedian">保存</button>
	                </div>
	               	 <div style=" padding-left: 5%;">
	               	 <ul id="tree" class="ztree" style="width:270px"; overflow:auto;">
	               	 	<span class='subtitle' style=" color: #CCC;" >数据为空！请选择角色列表</span>
	               	 </ul>
	               	 <input id="menuids" type="hidden"  class="form-control" />
					</div>
	    		</div>
        	</div>
	       <!--  <div class="col-lg-4">
	        	<div class="panel" style="height: 580px;overflow: auto;">
	                <div class="panel-heading">菜单按钮
	                	<button  style="float: right;"type="button" onclick="addusers()" class="btn btn-green btn-square" id="savejiedian">保存</button>
	                </div>
	               	 <div style=" padding-left: 5%;">
						<table class="table">
				              <tbody id="button">
				              	<tr>
				              		<td><span class='subtitle' style=" color: #CCC;" >数据为空！请选择菜单列表</span></td>
				              	</tr>
				              </tbody>
				         </table>
					</div>
	    		</div>
        	</div> -->
      </div>
    <!--END CONTENT-->
    </div>
    </div>
    <?} ?>
<SCRIPT type="text/javascript" >
	//树状结构
 var jursid;
 var roleid;
	$(function() {
		queryRoles()
	});
	var value;
	function getvalue() {  
            return value;
    } 
	var menubuttontext="<tr><td><span class='subtitle' style=' color: #CCC;'>数据为空！请选择菜单列表</span></td></tr>"
	function initTree(id) {
	 	$("#button").html(menubuttontext);
		roleid=id;
		 	value=[];
		$("input[name='checkall']:checked").each(function(){
			value.push($(this).val());
		}); 
		$.ajax({
			type : "post",
			data : {
				"id":id
			},
			url : "knowledgeEditDataJurisdictionMenu.do",
			dataType : "json",
			beforeSend : function(XMLHttpRequest) {},
			success : drawTree,
		});
	  }
	var setting = {
			check: {
				
				enable: true,
				nocheckInherit: true
				//chkboxType: {"Y" : "p", "N" : "ps"}
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			}
		};
	function drawTree(data) {
	   
		var zNodes = eval(data);
		$.fn.zTree.init($("#tree"), setting, zNodes).expandAll(true);
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.getNodes();
		for(var i=0;i<data.length;i++){
			if(data[i].page == 0){
				treeObj.checkNode(treeObj.getNodeByParam("id",data[i].id), true ); 
			}
		}
		showMenu();
	}
	
	function beforeClick(treeId, treeNode) {
		jursid = treeNode.id;
			$.ajax({
			type : "post",
			data : {
			"id":treeNode.id
			},
			url : "knowledgeEditDataQueryJurisdictionMenu.do",
			dataType : "json",
			beforeSend : function(XMLHttpRequest) {
			},
			success : function(data){
			//alert(JSON.stringify(data));
			var str = "";   
      		 $("#button").html("");
       			for(var i=0;i<data.length;i++){			
           		 str+="<tr><td>";
           		 	if(data[i].page == 1){
           		 		str+="<input type='checkbox' name='checkall' checked='true' value='"+data[i].id+"'/>&nbsp;&nbsp;&nbsp;";
           		 	}else{
           		 		str+="<input type='checkbox' name='checkall' value='"+data[i].id+"'/>&nbsp;&nbsp;&nbsp;";
           		 	}
                    str+= "<input class='btn btn-blue btn-square' type='button' onclick='button("+data[i].id+")' value="+data[i].name+" />"                 
                    +"</td></tr>"                   
           		 }
           		 if(data == ""){
           		 str+="<tr><td><span class='subtitle' style=' color: #CCC;' >数据为空！</span></td></tr>";
           		 }
           	$("#button").append(str);
			}
		});
	}
	var menuid;
	function onCheck(e, treeId, treeNode) {
			menuid = treeNode.id;	
			var zTree = $.fn.zTree.getZTreeObj("tree"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#citySel_"+did);
			cityObj.attr("value", v);
			
		}
	//保存
	function editSaveQuanXian(){
	
		if(roleid ==null){
			layer.msg('请先选择角色列表！');
		}else{
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			var checkedNode = treeObj.getCheckedNodes(); 
			var menuids="";
			for(var i=0;i<checkedNode.length;i++){
				if(checkedNode[i].id!=null){
					menuids+=checkedNode[i].id+",";
				}
			}
			menuids=menuids.substring(0,menuids.length-1);
			$.ajax({
				type : "post",
				url : "./menuEditSave.do",
				data : {
					"roleid" : roleid,
					"menuids" :menuids,
				},
				dataType : "json",
				async : false,
				success : function(data) {
					initTree(roleid);
					layer.msg('保存成功');
				},
				error : function(data) {
					alert("请求失败");
				}
			});
		}
	}	
		function showMenu() {
			var cityObj = $("#citySel_"+did);
			var cityOffset = $("#citySel_"+did).offset();
			$("#menuContent_"+did).css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent_"+did).fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn_"+did || event.target.id == "citySel_"+did || event.target.id == "menuContent_"+did || $(event.target).parents("#menuContent_"+did).length>0)) {
				hideMenu();
			}
		}
	
	//查询角色
	function queryRoles(){
			$.ajax({
			type : "post",
			data : {
			},
			url : "knowledgeEditDataQueryJurisdiction.do",
			dataType : "json",
			beforeSend : function(XMLHttpRequest) {
			},
			success : function(data){
			//alert(JSON.stringify(data));
			var str = "";   
      		 $("#roles").html("");
       			for(var i=0;i<data.length;i++){			
           		 str+="<tr><td>";
                    str+= "<a href='#' onclick='initTree("+data[i].id+")'>"+data[i].name+"</a>"                 
                    +"</td></tr>";                  
           		 }
           	$("#roles").append(str);
			}
		});
	}
	//保存按钮
	function addusers(){
		if(jursid ==null){
			layer.msg('请先选择菜单列表！');
		}else if(roleid==null){
			layer.msg('请先选择角色列表！');
		}else{
			var value=[];
			$("input[name='checkall']:checked").each(function(){
				value.push($(this).val());
			});
			
			$.ajax({
				type : "post",
				data : {
					"button" : value,
					"id" : jursid,
					"roleid" : roleid
				},
				url : "knowledgeEditDataAddJurisdictionButton.do",
				dataType : "json",
				traditional : true,
				beforeSend : function(XMLHttpRequest) {},
				success : function(data){
					layer.msg('保存成功!');
					beforeClick();
				},
			});
		}
	}
	
</SCRIPT>    
    
  
